<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/放入购物车.css">
    <script src="./js/flexible.js"></script>
    <script src="./js/better-scroll.min.js"></script>
</head>

<body>
    <div class="header">
        <img src="./images/fanhui.png" style="width: 0.2667rem; height: 0.4667rem;">
        <h1>商品详情</h1>
    </div>
    <div class="bannerBox">
        <div class="bannerCon">
            <ul class="dispfx">
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
                <li><img src="./images/lunbo.png" alt=""></li>
            </ul>
        </div>
        <div class="bannerIndicator">
            <ul class="dian">
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <div class="biaoti">
        <div class="bt-tp">
            <div class="cuxiao">
                <img src="./images/促销.png" style="width: 0.6667rem; height: 0.4rem;"> 莫次有机PWE活性美白洗面奶
            </div>
            <div class="jiage">
                <div class="jg-lt">
                    ￥169 <s>￥220</s>
                </div>
                <div class="jg-rt">
                    买够200元包邮
                </div>
            </div>
        </div>
        <div class="guige">
            <div class="gg-lt">
                规格
            </div>
            <div class="gg-rt">
                标准 <img src="./images/tiaozhuan.png" style="margin-left: .2667rem; width: 0.2133rem; height: 0.3333rem;">
            </div>
        </div>
    </div>
    <div class="hui"></div>
    <div class="fenlei">
        <ul>
            <li style="border-left: none;" class="blue">
                详情
            </li>
            <li>
                评价
            </li>
            <li style="border-right: none;">
                售后
            </li>
        </ul>
    </div>
    <img src="./images/详情.png" style="margin-bottom: 1.3333rem; width: 10rem; height: 4.5333rem;">
    <div class="footer">
        <ul>
            <li class="hei">
                <div class="kefu">
                    <img src="./images/客服.png">
                    <div>客服</div>
                </div>
                <div class="shoucang">
                    <img src="./images/收藏.png">
                    <div>收藏</div>
                </div>
            </li>
            <li class="zi">
                加入购物车
            </li>
            <li class="lan">
                立即购买
            </li>
        </ul>
        <div class="GO">
            <div class="gouwuche">
                <img src="./images/购物车.png">
            </div>
            <div class="red">
                2
            </div>
        </div>

        <div class="fangru">
            <div class="beijing">
                <div class="gm-xiangqing">
                    <div class="gm-shangping">
                        <div class="img"></div>
                        <div class="txt">
                            莫次有机PWE活性美白洗面奶
                            <div>￥169</div>
                        </div>
                        <div class="guanbi"><img src="./images/X.png"></div>
                    </div>
                    <div class="gm-xq">
                        <div class="gm-div one">
                            <div class="left">
                                商品规格
                            </div>
                            <div class="right">
                                <div class="one-div" id="xuanzhong">标准</div>
                                <div class="one-div">套装</div>
                            </div>
                        </div>
                        <div class="gm-div two">
                            <div class="left">
                                购买数量
                            </div>
                            <div class="right">
                                <div class="jian"><img src="./images/jian.png"></div>
                                <input type="number" value="2" min="0">
                                <div class="jia"><img src="./images/jia.png"></div>
                            </div>
                        </div>
                        <div class="gm-div three">
                            <div class="left">
                                商品颜色
                            </div>
                            <div class="right">
                                <div class="yanse y1" id="dangqian"></div>
                                <div class="yanse y2"></div>
                                <div class="yanse y3"></div>
                                <div class="yanse y4"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="queding">
                    确定
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 轮播图
    var bs = BetterScroll.createBScroll(".bannerCon", {
        // ① 开启横向滚动，禁止纵向滚动
        scrollX: true,
        scrollY: false,
        // ② 保留轮播图上，纵向的原生滚动
        eventPassthrough: true,
        // ③ 开启轮播
        slide: {
            loop: true,
            threshold: 0.1,
            speed: 400,
            listenFlick: true,
            autoplay: false,
            interval: 3000
        },
        // 设置为false,解决轮播快速切换时的闪烁问题
        momentum: false,
        // 当loop为true时，设置此项为false,可以解决拖动过快产生空白的问题
        bounce: false
    });
    bs.on('scrollEnd', () => {
        var lis = document.querySelectorAll('.bannerIndicator li');
        var page = bs.getCurrentPage().pageX;
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = '';
        }
        lis[page].className = 'on';
    });
    // 分类高亮切换
    var lis = document.querySelectorAll(".fenlei ul li");

    for (var i = 0; i < lis.length; i++) {
        forer(i)
    }

    function forer(i) {
        lis[i].onclick = function() {
            for (var j = 0; j < lis.length; j++) { //重置所有属性
                lis[j].className = '';
            }
            lis[i].className = 'blue'; //修改文字颜色
        }
    }
    // 跳转
    var fanhui = document.querySelector('.header img');
    fanhui.onclick = function() {
        window.history.go(-1);
        if (!window.history.go(-1)) {
            location.href = "./首页.html";
        }
    };
    lis[1].onclick = function() {
        location.href = "./商品详情-评价.html";
    };
    lis[2].onclick = function() {
        location.href = "./商品详情-售后.html";
    };
    // 弹出
    var zi = document.querySelector('.zi');
    var lan = document.querySelector('.lan');
    var fangru = document.querySelector('.fangru')
    zi.onclick = function() {
        fangru.style.display = "block";
    };
    lan.onclick = function() {
        fangru.style.display = "block";
    };
    // 关闭
    var guanbi = document.querySelector('.guanbi');
    guanbi.onclick = function() {
        fangru.style.display = "none";
    };
    // 商品规格高亮切换
    var one = document.querySelectorAll('.one-div');
    for (var i = 0; i < one.length; i++) {
        ones(i)
    }

    function ones(i) {
        one[i].onclick = function() {
            for (var j = 0; j < one.length; j++) { //重置所有属性
                one[j].id = '';
            }
            one[i].id = 'xuanzhong'; //修改文字颜色
        }
    };
    // 商品颜色高亮切换
    var yanse = document.querySelectorAll('.yanse');
    for (var i = 0; i < yanse.length; i++) {
        yanses(i)
    }

    function yanses(i) {
        yanse[i].onclick = function() {
            for (var j = 0; j < yanse.length; j++) { //重置所有属性
                yanse[j].id = '';
            }
            yanse[i].id = 'dangqian'; //修改文字颜色
        }
    };
    // 购买数量加减
    var number = document.querySelector('.right input');
    var jian = document.querySelector('.jian');
    var jia = document.querySelector('.jia');
    jian.onclick = function() {
        var now = number.value;
        if (now > 0) {
            number.value = now - 1;
        }
    }
    jia.onclick = function() {
        var now = number.value;
        now++;
        number.value = now;
    }
</script>

</html>